<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>移动支付系统 - 首页</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
  <script src="{{ url_for('static', filename='js/index.js') }}"></script>
</head>
<body>
  <div class="container">
    <!-- 顶部栏 -->
    <header class="header">
      <div class="user-info">
        <img src="{{ url_for('static', filename='img/tx.jpg') }}" alt="用户头像" class="avatar">
        <div class="balance">
          余额：<span id="balance">12345.67</span> 元
        </div>
      </div>
      <button class="msg-btn" onclick="openMessage()">
        <img src="{{ url_for('static', filename='img/xx.jpg') }}" alt="消息通知" class="msg-icon">
      </button>
    </header>

    <!-- 功能按钮区域 - 添加信用功能入口 -->
    <div class="function-grid">
      <button class="grid-item" onclick="openTouchPay()">
        <img src="{{ url_for('static', filename='img/pyp.png') }}" alt="碰一碰">
        <p>碰一碰</p>
      </button>
      <button class="grid-item" onclick="openBioPay()">
        <img src="{{ url_for('static', filename='img/swzf.png') }}" alt="生物支付">
        <p>生物支付</p>
      </button>
      <button class="grid-item" onclick="openTransport()">
        <img src="{{ url_for('static', filename='img/dt.jpeg') }}" alt="公交地铁">
        <p>公交地铁</p>
      </button>
      <button class="grid-item" onclick="openRedpack()">
        <img src="{{ url_for('static', filename='img/hb.jpg') }}" alt="红包">
        <p>红包</p>
      </button>
      <button class="grid-item" onclick="openTransfer()">
        <img src="{{ url_for('static', filename='img/zz.png') }}" alt="转账">
        <p>转账</p>
      </button>
      <!-- 新增信用功能按钮 -->
      <button class="grid-item" onclick="openCredit()">
        <img src="{{ url_for('static', filename='img/xy.png') }}" alt="信用">
        <p>信用</p>
      </button>
    </div>

    <!-- 最近交易消息 -->
    <div class="section">
      <h3>最近交易</h3>
      <div class="history-list">
        <div class="history-item">
          <div class="history-content">
            <h4>超市购物</h4>
            <p>2025-06-12 18:30</p>
          </div>
          <div class="history-amount">-128.50元</div>
        </div>
        <div class="history-item">
          <div class="history-content">
            <h4>餐厅消费</h4>
            <p>2025-06-12 12:15</p>
          </div>
          <div class="history-amount">-86.00元</div>
        </div>
        <div class="history-item">
          <div class="history-content">
            <h4>收到转账</h4>
            <p>2025-06-11 09:45</p>
          </div>
          <div class="history-amount">+500.00元</div>
        </div>
      </div>
    </div>

    <!-- 广告区域 -->
    <div class="ad-section">
      <div class="ad-banner">
        <img src="{{ url_for('static', filename='img/xsyh.png') }}" alt="限时优惠">
        <div class="ad-content">
          <h4>新人专享礼包</h4>
          <p>首单立减20元，立即领取</p>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部导航 -->
  <nav class="bottom-nav">
    <a href="/" class="nav-item active">
      <img src="{{ url_for('static', filename='img/sy.png') }}" alt="首页">
      <span>首页</span>
    </a>
    <a href="/pay" class="nav-item">
      <img src="{{ url_for('static', filename='img/sfk.png') }}" alt="收付款">
      <span>收付款</span>
    </a>
    <a href="/discover" class="nav-item">
      <img src="{{ url_for('static', filename='img/fx.png') }}" alt="发现">
      <span>发现</span>
    </a>
    <a href="/profile" class="nav-item">
      <img src="{{ url_for('static', filename='img/wd.png') }}" alt="我的">
      <span>我的</span>
    </a>
    <a href="/more" class="nav-item">
      <img src="{{ url_for('static', filename='img/gd.png') }}" alt="更多">
      <span>更多</span>
    </a>
  </nav>

  <script>
    // // 模拟用户余额
    // let userBalance = 12345.67;

    // // 更新余额显示
    // function updateBalance() {
    //   document.getElementById('balance').textContent = userBalance.toFixed(2);
    // }

    // // 跳转至支付页
    // function goToPay() {
    //   window.location.href = 'pay.html';
    // }

    // // 打开碰一碰功能
    // function openTouchPay() {
    //   window.location.href = 'touchpay.html';
    // }

    // // 打开生物支付
    // function openBioPay() {
    //   window.location.href = 'biopay.html';
    // }

    // // 模拟消息通知
    // function openMessage() {
    //   alert('您有3条新消息');
    // }
    
    // // 打开公交地铁
    // function openTransport() {
    //   window.location.href = 'transport.html';
    // }
    
    // // 打开红包
    // function openRedpack() {
    //   window.location.href = 'redpack.html';
    // }
    
    // // 打开转账
    // function openTransfer() {
    //   window.location.href = '/transfers';
    // }
    
    // // 打开信用功能
    // function openCredit() {
    //   window.location.href = 'credit.html';
    // }

    // // 页面加载时更新余额显示
    // window.onload = function () {
    //   updateBalance();
    // };
  </script>
</body>
</html>